<script setup lang="ts">
import type { IFormDataIntervalDto } from '@/components/sheets/CmpSheets'
import CmpSheets from '@/components/sheets/CmpSheets.vue'
import { useCmpSheetsUseExport } from '@/components/sheets/CmpSheetsUseExport'
import { useSheetApiTest } from '@/components/sheets/sheetApiTest'
import { FUniver } from '@univerjs/presets'
import { onMounted, ref } from 'vue'

//#region 数据文件

// import { workbookData, reqData } from './workbookData/workbookData1'
import { workbookData, reqData } from './workbookData/workbookData2'
// import { workbookData, reqData } from './workbookData/workbookData3'
import type { IReq } from './workbookData/type'

const curReqData: IReq<Array<IFormDataIntervalDto>> = reqData

// 测试异步生成表格, 模拟 后台数据
// let curReqData: IReq<Array<IFormDataIntervalDto>> | null = null
// setTimeout(() => {
//   curReqData = reqData
// }, 2000)

//#endregion

const cmpSheetsRef = ref<InstanceType<typeof CmpSheets> | null>()

const {
  getData,
  setRef,
  setValue,
  setRangeValue,
  getValue,
  getWorkBookData,
  getSheetData,
  createSheet,
  scrollTo,
  scrollToBottom,
  setCellBackground,
  focusCell,
  clearCellStyle,
  resizeColsWidth,
  recover,
} = useSheetApiTest()

onMounted(() => {
  setRef(cmpSheetsRef.value?.univerAPIRef as FUniver)
})

const dateTools = {
  /**
   * 格式化日期
   * @param date 日期
   * @param format 格式 如: yyyy-MM-dd HH:mm:ss
   * @returns 格式化后的日期
   */
  format: (date: Date, format: string) => {
    const map: { [key: string]: string } = {
      yyyy: date.getFullYear().toString(),
      MM: (date.getMonth() + 1).toString().padStart(2, '0'),
      dd: date.getDate().toString().padStart(2, '0'),
      HH: date.getHours().toString().padStart(2, '0'),
      mm: date.getMinutes().toString().padStart(2, '0'),
      ss: date.getSeconds().toString().padStart(2, '0'),
    }

    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (matched) => map[matched])
  },
}

const exportXlsx = () => {
  const { exportToExcel } = useCmpSheetsUseExport()
  const fileName = `${dateTools.format(new Date(), 'yyyyMMddHHmmss')}_测试文件`
  exportToExcel(cmpSheetsRef.value?.univerAPIRef as FUniver, fileName)
}
</script>

<template>
  <div class="container">
    <button @click="getData">获取数据</button>
    <button @click="setValue">修改值</button>
    <button @click="setRangeValue">修改范围值</button>
    <button @click="getValue">获取值</button>
    <button @click="getWorkBookData">获取整个数据</button>
    <button @click="getSheetData">获取表数据</button>
    <button @click="createSheet">创建sheet</button>
    <button @click="scrollTo">滚动到顶部</button>
    <button @click="scrollToBottom">滚到到底部</button>
    <button @click="setCellBackground">设置单元格背景</button>
    <button @click="focusCell">焦点</button>
    <button @click="clearCellStyle">清除单元格值</button>
    <button @click="resizeColsWidth">设置列宽</button>
    <button @click="recover">还原表格</button>
    <button @click="exportXlsx">导出xlsx文件</button>
    <CmpSheets ref="cmpSheetsRef" :workbookData="workbookData" :data="curReqData?.data" />
  </div>
</template>

<style scoped>
.container {
  height: 100%;
  width: 100%;
}
</style>
